<template>
	<div class="record-plane">
		<div class="opers flex v-c">
  			<el-form :inline="true" class="filter-blk flex-1">
				<el-form-item label="人员姓名">
					<el-input class="flex-1" placeholder="请输入" v-model.trim="filterForm.accountname"></el-input>
				</el-form-item>
				<el-form-item label="起始日期">
					<el-date-picker
						v-model="dateRange"
				      	type="daterange"
				      	range-separator="至"
				      	start-placeholder="开始日期"
				      	end-placeholder="结束日期"
				      	format="yyyy-MM-dd"
				      	value-format="yyyy-MM-dd"
				      	@change="dateChange">
				    </el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="searchAction"><i class="iconfont icon-search"></i> 搜索</el-button>
					<el-button type="primary" @click="resetAction"><i class="iconfont icon-refresh"></i> 重置</el-button>
				</el-form-item>
			</el-form>
  		</div>
  		<el-table
  			class="mt-20"
			:data="dataList" 
			style="width: 100%"
			v-loading="loading">
		    <el-table-column prop="accountname" label="登录账号"></el-table-column>
		    <el-table-column prop="name" label="人员姓名"></el-table-column>
		    <el-table-column prop="starttime" label="开始时间"></el-table-column>
		    <el-table-column prop="endtime" label="结束时间"></el-table-column>
		    <!-- <el-table-column prop="brief" label="值班备注"></el-table-column> -->
		</el-table>
		<el-pagination
			v-if="total>0"
			class="text-right mt-20 mr-20"
	      	@current-change="handleCurrentChange"
	      	:current-page="currentPage"
	      	:page-size="pageSize"
	      	layout="prev, pager, next, total, jumper"
	      	:total="total">
	    </el-pagination>
	</div>
</template>
<script>
export default {
	name: 'DutyLog',
	props: {
		id: {
			type: String,
			default: "",
		}
	},
	computed: {},
	watch: {
		dateRange (val) {
			if(typeof(val[0])=='object'){
				this.filterForm.queryStarttime = [val[0].getFullYear(),val[0].getMonth()+1,val[0].getDate()].join('-')
				this.filterForm.queryEndtime = [val[1].getFullYear(),val[1].getMonth()+1,val[1].getDate()].join('-')
			}else{
				this.filterForm.queryStarttime = val[0]
				this.filterForm.queryEndtime = val[1]
			}
		}
	},
	data () {
		return {
			dateRange: '',
			filterForm: {
				queryStarttime: '',
				queryEndtime: ''
			},
			partitionList: [],
			seatList: [],
			total: 0,
			loading: false,
			currentPage:1,
			pageSize: 10,
			dataList:[],
		}
	},
	methods: {
		getData (page) {
			this.loading = true
			let params = Object.assign({
				page: page,
				limit: this.pageSize,
				businessId: this.id
			},this.filterForm)
			this.$get('/check/dutyPerson/getDutyRecord', params).then(res => {
				this.loading = false
            	this.dataList = res.data.Items
            	this.total = res.data.totalSize
            	this.currentPage = page
            }, (err) =>{
            	// 
            })
		},
		dateChange (value) {
		},
		searchAction () {
			this.getData(1)
		},
		resetAction () {
			this.dateRange = ''
		},
		handleCurrentChange (page) {
			this.getData(page)
		}
	},
	created () {
		// let end = new Date();
		// let start = new Date();
        // start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
        // this.dateRange = [start, end]
		this.$nextTick(()=>{
			this.getData(1)
		});
	}
}
</script>